<template>
	<view>
		<div id='liuyan'>留言板</div>
		<view class="uni-padding-wrap">
			<form @submit="commitComments">
				<textarea class="contentTextArea" name="commentContent" v-model="commentContent" placeholder="请留言..."></textarea>
				<button class="commitButton" formType="submit">提交</button>
			</form>		
			<view class="uni-comment">
				<view class="uni-comment-list" v-for="(commentsList,index) in commentsList" :key="index">					
					<view class="uni-comment-body">
						<view class="uni-comment-date">
							<text>{{commentsList.created_at}}</text>
						</view>
						<view class="uni-comment-content">{{commentsList.content}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			commentsList:[],
			index:'',
			nickname:'',
			created_user_id:'',
			commentContent:'',
			}
		},
		methods: {
			commitComments() {
			//这里定义你自己要请求添加留言接口带的值，我是从接口获取到了
			var created_user_id = this.created_user_id;
			var content = this.commentContent;
			var nickname = this.nickname;
			var commentsList=this.commentsList;
			uni.request({	
					// url: 'http://xxxx/xxx/create,
					method: 'POST',
					header: {
						'content-type': "application/x-www-form-urlencoded"
					},
					//因为我要传递数组格式的comment:{content:'',userid:''}给后台所以这样写，你直接传字段的话就去掉前面的comment和中括号就好了。
					data: {
						'comment[content]': content,					
						'comment[created_user_id]': created_user_id,
					},
					success: function(res) {
						if (res.data.success == 1) {
							uni.showToast({
								icon: 'success',
								title: '留言成功'
							});	
								  //这是重点，意思是动态添加，使用unshift就插在前面，也可以用push							
							commentsList.total += 1;
							commentsList.unshift({
								"nickname": nickname,
								"content":content,
								"id":res.data.id,									
							});									
						} else {
							uni.showToast({
								title: res.data.data,
								icon: "none"
							});
						}
					}
				})
			},
        }
    }
</script>

<style>
 #liuyan{
	 font-size: 40px;
	 margin-top: 20px;
	 margin-left: 95px;
}
        .uni-padding-wrap {
		padding: 30upx;
	}
 
	view {
		font-size: 28upx;
	}
 
	.uni-comment {
		padding: 5rpx 0;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #e9e7ef;
	}
 
	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #e9e7ef;
	}
 
	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}
 
	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}
 
	.uni-comment-body {
		width: 100%;
	}
 
	.uni-comment-top {
		line-height: 1.5em;
		justify-content: space-between;
	}
 
	.uni-comment-top text {
		color: #0A98D5;
		font-size: 24upx;
	}
 
	.uni-comment-date {
		line-height: 38upx;
		flex-direction: row;
		justify-content: space-between;
		display: flex !important;
		flex-grow: 1;
		color: gray;
	}
 
	.uni-comment-date view {
		color: #666666;
		font-size: 24upx;
		line-height: 38upx;
	}
 
	.uni-comment-content {
		line-height: 1.6em;
		font-size: 28upx;
		padding: 8rpx 0;
	}
 
	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 28upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: #333 !important;
		margin: 0 10upx;
	}
	.commitButton{	
		background-color: #007AFF;
		color: white;
		width: 90%;
		margin: 0rpx auto;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 37rpx;
		background: linear-gradient(left top,#86B6FD, #8fc9fc,#86B6FD);
	}
	.contentTextArea{
		font-size: 30rpx;
		height: 170rpx;
		border:1rpx solid #e9e7ef;
		width: 86%;
		margin: 0rpx auto;
		margin-bottom: 15rpx;
		padding: 20rpx 0 0 20rpx;
		border-radius: 6rpx;
	}
</style>
